<template>
  <div id="box">
    <div id="pagehead">
      <div id="pageheaddiv"></div>
      <span id="pageheadspan">评价管理</span>
      <!-- <el-button
      @click="exit"
        id="pageheadbtn"
        type="primary"
        icon="el-icon-user"
        circle
      ></el-button> -->
    </div>

    <div id="content">
      <div id="pageheadform">
        <el-form :inline="true" :model="data" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              v-model="data.name"
              placeholder="会员手机/姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="data.coach" placeholder="请选择教练">
              <el-option
                v-for="(v, i) in coacharr"
                :key="i"
                :label="v.name"
                :value="v.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="data.lesson" placeholder="请选择课程分类">
              <el-option
                v-for="(v, i) in coursenamearr"
                :label="v.name"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchbtn">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div id="commentdiv">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="evaluationTime" label="评价时间" width="120">
          </el-table-column>
          <el-table-column prop="coursesTime" label="课时" width="120">
          </el-table-column>
          <el-table-column prop="user_name" label="会员" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="coach" label="教练" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="feelings"
            label="训练感受"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="serviceEvaluation"
            label="教练服务"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="evaluation"
            label="评价内容"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="image" label="照片" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="status" label="是否显示" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <div id="footbtn" style="margin-top: 20px">
          <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
            >切换第二、第三行的选中状态</el-button
          > -->
          <!-- <el-button @click="toggleSelection()">取消选择</el-button>
          <el-button @click="toggleSelection()">删除</el-button> -->
        </div>
      </div>

      <div id="pagefoot">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          @current-change="change"
          @prev-click="prev"
          @next-click="next"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      coursenamearr: [],
      coacharr: [],
      arr: [],
      page: 1,
      size: 5,
      total: 0,
      data: {
        name: "",
        coach: "",
        lesson: "",
      },
      formInline: {
        user: "",
        region: "",
      },
      tableData: [],
      multipleSelection: [],
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getCon() {
      this.$axios({
        url: "/gym/evaluation/list",
        method: "post",
        dataType: "json",
        data: {
          page: this.page,
          limit: this.size,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    change(v) {
      this.page = v;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    exit() {
      window.location.href = "";
    },
    getCoach() {
      this.$axios({
        url: "/gym/coach/all",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coacharr = res.data.data;
      });
    },
    getcoursename() {
      this.$axios({
        url: "/gym/courses/nameList",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coursenamearr = res.data.data;
      });
    },
    searchbtn() {
      this.$axios({
        url: "/gym/courses/list",
        method: "post",
        dataType: "json",
        data: {
          coursesId: this.data.coach,
          coachsId: this.data.lesson,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.$message.success("查询成功！");
        } else {
          this.$message.error("查询失败！");
        }
        this.data.searchcoursename = "";
        this.data.searchcourse = "";
      });
    },
  },

  mounted() {
    this.getCon();
    this.getCoach();
    this.getcoursename();
  },
};
</script>
<style scoped lang="less">
#pagehead {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #000, #fff);
}
#pageheaddiv {
  width: 4px;
  height: 30px;
  background: #409eff;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
}
#pageheadspan {
  color: #fff;
  float: left;
  line-height: 40px;
  font-weight: bold;
  margin-left: 5px;
}
#pageheadbtn {
  float: right;
  margin-right: 50px;
  background: transparent;
  color: #000;
}
#content {
  border: 1px solid red;
  width: 95%;
  margin-left: 30px;
  margin-top: 30px;
  border-radius: 5px;
}
#pageheadform {
  text-align: left;
  margin-left: 10px;
  margin-top: 10px;
}
#footbtn {
  text-align: left;
}
#commentdiv {
  padding: 10px;
}
#pagefoot {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
</style>